<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>阿前的Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#03a6f3">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700|Raleway:300,400,500,600,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
    <header>
        <div class="header-top" style="height: 15px"></div>
        <div>
            <div style="margin-left: 0px">
                <div class="nav-sec">
                    <div class="container">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="index.html">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="about.html">About Me </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="featured.html">Featured</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="category.html">Photography</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">注册</a>
                            </li>
                            <li class="nav-item" style="border: 0px">
                                <input class="nav-link" href="category.html" type="button" id="login" value="哈哈"/>
                            </li>
                             <div class="nav-item" style="border: 0px">
                                <a class="nav-link" href="category.html" style="margin-left: 150px;color: red;font-weight: bold">发表文章</a>
                            </div>
                            <div class="nav-item" style="border: 0px">
                                <a class="nav-link" href="category.html ">消息</a>
                            </div>
                            <div class="nav-item" style="border: 0px">
                                <img src="images/headPic/spost2.jpg" alt="post-img" style="width: 35px;height:35px;border: 0px">
                            </div>
                        </ul>
                    </div>
            <!-- 导航栏结束 -->
                </div>
            </div>
         <!-- Banner Sec -->
    <section class="banner-sec" style="background:url(./images/home-banner.jpg)no-repeat;">
        <div class="container">
            <div class="banner-content">
                <h1>欢迎来到阿前的博客</h1>
                <a href="blog.html" class="btn more-btn">About me</a>
            </div>
        </div>
    </section>
        <div class="header-main">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 align-self-center sharing-sec">
                        <div class="share align-middle">
                            <span class="fb"><i class="fa fa-facebook-official"></i></span>
                            <span class="instagram"><i class="fa fa-instagram"></i></span>
                            <span class="twitter"><i class="fa fa-twitter"></i></span>
                            <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                            <span class="google"><i class="fa fa-google-plus"></i></span>
                        </div>
                    </div>
                    <div class="col-md-4 align-self-center">
                        
                    </div>
                    <div class="col-md-4 align-self-center">
                        <div class="search-sec">
                            <div class="search">
                                <input type="text"  style="width: 220px"  placeholder="Search here 搜索你想要的文章">
                                <span><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main body sec -->

    <section class="main-sec">
        <div class="container">
            <div class="standard-post-format">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Big post section -->
                        <div class="post-item big-post">
                            <h2>Girl in beautiful white gown and posing for photoshoot!</h2>
                            <img src="images/post1.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="admin">Admin</a></li>
                                <li class="breadcrumb-item">In <a href="#" class="fashion">Fashion </a></li>
                                <li class="breadcrumb-item">(23) Comments</li>
                            </ol>
                            <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's printer took a galley of type and scrambled it imen book.</h5>
                            <a href="blog.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="text">Share This</span>
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                        <!-- End Big post section -->
                    </div>
                </div>
                <div class="row small-post-sec">
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost2.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost3.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost4.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost2.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost3.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="post-item small-post">
                            <img src="images/spost4.jpg" alt="post-img">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">November 20, 2014</li>
                                <li class="breadcrumb-item"> By <a href="#" class="">Admin</a></li>
                            </ol>
                            <h2><a href="#">A beautiful day with superb sunlight at beach!</a></h2>
                            <h5>
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has the industry's...
                        </h5>
                            <a href="blog-inner.html" class="continue-read">Continue Reading</a>
                            <div class="share align-middle">
                                <span class="fb"><i class="fa fa-facebook-official"></i></span>
                                <span class="instagram"><i class="fa fa-instagram"></i></span>
                                <span class="twitter"><i class="fa fa-twitter"></i></span>
                                <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                                <span class="google"><i class="fa fa-google-plus"></i></span>
                                <span class="google"><i class="fa fa-commenting"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="button-sec">
                    <button class="btn load-more">load more</button>
                </div>
            </div>
            <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >网站建设</a></div>

            <!-- Aside section start -->
            <aside>
                <div class="about-sec">
                    <h3>About Me</h3>
                    <figure>
                        <img src="images/profile-photo.jpg" alt="profile">
                    </figure>
                    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's printer took a galley of type it imen book.</h5>
                    <a href="about.html" class="read-more">Read More About Myself</a>
                    <div class="share align-middle">
                        <span class="fb"><i class="fa fa-facebook-official"></i></span>
                        <span class="instagram"><i class="fa fa-instagram"></i></span>
                        <span class="twitter"><i class="fa fa-twitter"></i></span>
                        <span class="pinterest"><i class="fa fa-pinterest"></i></span>
                        <span class="google"><i class="fa fa-google-plus"></i></span>
                    </div>
                </div>
                <div class="category-sec">
                    <h3>Categories</h3>
                    <ul>
                        <li><a href="#" class="active">Photography</a></li>
                        <li><a href="#">At & Lifestyle</a></li>
                        <li><a href="#">Health & Fitness</a></li>
                        <li><a href="#">Landscapes</a></li>
                        <li><a href="#">Travelling</a></li>
                        <li><a href="#">Quotes</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Featured</a></li>
                        <li><a href="#">Photography</a></li>
                    </ul>
                </div>
                <div class="most-read">
                    <h3>Most Read</h3>
                    <ul>
                        <li>
                            <figure style="background:url(./images/rsmall.jpg)no-repeat;"></figure>
                            <div class="post-content">
                                <h3><a href="#">Man Walking on the desert alone in sunset time.</a></h3>
                                <h5>Nov 20, 2014 </h5>
                                <span>By <a href="#">Admin</a></span>
                            </div>
                        </li>
                        <li>
                            <figure style="background:url(./images/rsmall2.jpg)no-repeat;"></figure>
                            <div class="post-content">
                                <h3><a href="#">Man Walking on the desert alone in sunset time.</a></h3>
                                <h5>Nov 20, 2014 </h5>
                                <span>By <a href="#">Admin</a></span>
                            </div>
                        </li>
                        <li>
                            <figure style="background:url(./images/rsmall3.jpg)no-repeat;"></figure>
                            <div class="post-content">
                                <h3><a href="#">Man Walking on the desert alone in sunset time.</a></h3>
                                <h5>Nov 20, 2014 </h5>
                                <span>By <a href="#">Admin</a></span>
                            </div>
                        </li>
                        <li>
                            <figure style="background:url(./images/rsmall4.jpg)no-repeat;"></figure>
                            <div class="post-content">
                                <h3><a href="#">Man Walking on the desert alone in sunset time.</a></h3>
                                <h5>Nov 20, 2014 </h5>
                                <span>By <a href="#">Admin</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
<!-- facebook like section -->
                <div class="fb-sec">
                    <iframe src="#/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftemplate.net%2F&tabs&width=330&height=214&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=true&appId" width="100%" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
                </div>
<!-- Tag section -->
                <div class="tag-sec">
                    <h3>Tag Cloud</h3>
                    <ul>
                        <li><a href="#" class="sky-blue">photography</a></li>
                        <li><a href="#" class="light-pink">food</a></li>
                        <li><a href="#" class="nature">nature</a></li>
                        <li><a href="#" class="health">health & wellness</a></li>
                        <li><a href="#" class="sky-blue-d">food</a></li>
                        <li><a href="#" class="dark">nature</a></li>
                        <li><a href="#" class="jelly-bean">photography</a></li>
                        <li><a href="#" class="kashmir-blue">food</a></li>
                        <li><a href="#" class="green">nature</a></li>
                    </ul>
                </div>
<!-- Twitter feed section -->
                <div class="twitter-feed">
                    <h3>Twitter Feeds</h3>
                    <ul>
                        <li>
                            <blockquote>
                                <a href="#" class="author">@Themes </a> And yes this is the only awsome ownload high qyality and free HD photos for <a href="#">commercial</a>
                                <a href="#">free purpose...</a>
                            </blockquote>
                        </li>
                        <li>
                            <blockquote>
                                <a href="#" class="author">@fotobazaar  </a> download high qyality and <a href="#">free HD photos </a>for commercial free purpose...
                            </blockquote>
                        </li>
                        <li>
                            <blockquote>
                                <a href="#" class="author">@landscapes  </a> And yes this is the only awsome ownload high qyality and free HD photos for <a href="#">commercial</a>
                                <a href="#">free purpose...</a>
                            </blockquote>
                        </li>
                        <li>
                            <blockquote>
                                <a href="#" class="author">@Themes </a> And yes this is the only awsome ownload high qyality and free HD photos for <a href="#">commercial</a>
                                <a href="#">free purpose...</a>
                            </blockquote>
                        </li>
                    </ul>
                    <span class="twitter-follow">Follow us on <i class="fa fa-twitter"></i></span>
                </div>
            </aside>
        </div>
    </section>
<!-- Subscribe section -->
    <section class="subscribe-sec" style="background:url(./images/subscribe.jpg" )no-repeat;>
        <div class="cover"></div>
        <div class="container">
            <h3>Subscribe to Newsletter</h3>
            <h5>And get notified of new and latest posts</h5>
            <div class="form">
                <form>
                    <input type="text" placeholder="Your Name" required>
                    <input type="email" placeholder="Your Email" required>
                    <button class="btn submit-btn">Submit</button>
                </form>
            </div>
        </div>
    </section>
<!-- Popular posts section -->
    <section class="popular-posts">
        <div class="row">
            <div class="col-md-2 col-sm-4 twt-post">
                <img src="images/t1.jpg" alt="t1">
                <div class="hover-effect">
                    <div class="content">
                        <h4>Follow Us</h4>
                        <span><i class="fa fa-instagram"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 twt-post">
                <img src="images/t2.jpg" alt="t1">
                <div class="hover-effect">
                    <div class="content">
                        <h4>Follow Us</h4>
                        <span><i class="fa fa-instagram"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 twt-post">
                <img src="images/t3.jpg" alt="t1">
                <div class="hover-effect">
                    <div class="content">
                        <h4>Follow Us</h4>
                        <span><i class="fa fa-instagram"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 twt-post">
                <img src="images/t4.jpg" alt="t1">
                <div class="hover-effect">
                    <div class="content">
                        <h4>Follow Us</h4>
                        <span><i class="fa fa-instagram"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 twt-post">
                <img src="images/t1.jpg" alt="t1">
                <div class="hover-effect">
                    <div class="content">
                        <h4>Follow Us</h4>
                        <span><i class="fa fa-instagram"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 twt-post">
                <img src="images/t2.jpg" alt="t1">
                <div class="hover-effect">
                    <div class="content">
                        <h4>Follow Us</h4>
                        <span><i class="fa fa-instagram"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <h5>(C) 2017. All Rights Reserved. Personal Blog Theme / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></h5>
        </div>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/custom.js"></script>

</body>
<script>
	$(function(){
		//$("#login").unbind("click").bind("click", function(){
			var admin ="admin";
		//文档加载事件，整个文档加载完成后执行。就仅仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。 
			$.ajax({  // ajax登陆请求
				url:"/hello",
				type:"POST",
				data:{"admin":admin},
				dataType: "json", 
				//async:false,
				//contentType: "application/x-www-form-urlencoded,; charset=utf-8",
				success:function(res){
					console.log(JSON.stringify(res));
					alert(res);
				}
		   });
		//});
	});
</script>


</html>